<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Thanks for applying...</title>
<style type="text/css">
@import "/static/css/jquery.countdown.css";

#utilnavbarid {
	font-family:Tahoma, Geneva, sans-serif;
	color:#39C;
	position: absolute;
	top: 0px;
	right: 10px;
	min-width:450px;
	height: 25px;
	margin-top: 0px;
	padding-top: 2px;
	text-align: right;
	/*background-color: #999;*/
	line-height: 20px;
}
#utilnavbarid p {
	margin:0px;
	padding:0px;
}

#userid {
	width: 900px;
	height: 100px;
	background-color: #993;
	position: absolute;
	z-index: 1000;
	top: 55px;
	left: 30px;
	/*font-family: Verdana, Geneva, sans-serif;*/
	font-family:Tahoma, Geneva, sans-serif;
	font-size: 24px;
	color: #33C;
	padding-left: 20px;
}

#userid > h3 {
	font-size: 18px;
	line-height: 0.3em;
}

#allid {
	width: 500px;
	height: 100px;
	background-color:#CCC;
	position: absolute;
	z-index: 1000;
	top: 150px;
	left: 160px;
}


#secondsid {
	width: 240px;
	height: 65px;
	background-color:#3F0;
	position: absolute;
	z-index: 1000;
	top: 300px;
	left: 400px;
}
#minutesid {
	width: 240px;
	height: 65px;
	background-color:#F9C;
	position: absolute;
	z-index: 999;
	top: 350px;
	left: 600px;
}
#hoursid {
	width: 240px;
	height: 65px;
	background-color: #C93;
	position: absolute;
	z-index: 998;
	top: 405px;
	left: 500px;
}
#daysid {
	width: 240px;
	height: 65px;
	background-color: #F30;
	position: absolute;
	z-index: 998;
	top: 455px;
	left: 650px;
}
#weeksid {
	width: 240px;
	height: 65px;
	background-color: #36C;
	position: absolute;
	z-index: 998;
	top: 500px;
	left: 475px;
}
#monthsid {
	width: 240px;
	height: 65px;
	background-color: #FC6;
	position: absolute;
	z-index: 998;
	top: 530px;
	left: 310px;
}
#yearsid {
	width: 240px;
	height: 65px;
	background-color: #F60;
	position: absolute;
	z-index: 998;
	top: 490px;
	left: 160px;
}

#applyaccountid {
	width: 600px;
	height: 400px;
	background-color: #FFC;
	position: absolute;
	z-index: 2000;
	top: 130px;
	left: 160px;
	padding: 50px;
}
.countdown_amount {
	font-size:300%;
 	
}

.foregroundclass {
	/*font-size:300%;*/
	font-family:Tahoma, Geneva, sans-serif;
 	
}

</style>




<style type="text/css">
<!--
.peukenclass {
	border-right-width: 2px;
	border-bottom-width: 3px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #999;
	border-bottom-color: #CCC;
	border-left-width: 4px;
	border-left-style: solid;
	border-left-color: #EAEAEA;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #666;
}





#peuken1id {
	overflow: hidden;
	position: absolute;
	left:50px;
	/*right:40px;*/
	top:50px;
	height: 335px;
}
#peuken2id {
	overflow: hidden;
	position: absolute;
	left:200px;
	/*right:20px;*/
	top:200px;
	height: 335px;
	z-index:100;

}
#peuken3id {
	overflow: hidden;
	position: absolute;
	left:100px;
	/*right:100px;*/
	top:500px;
	height: 335px;
	z-index:10;

}
body {
	background-color: #FFD595;
	margin:0px;
	padding:0px;

}
#holderid {
	overflow: hidden;
	height: 100%;
	width: 100%;
	position: absolute;
}
.countdown_section {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:18px;
	
}
.countdown_amount{
	font-size:36px;
	font-family: Tahoma, Geneva, sans-serif;	
}
#acknowledgementid {
	font-size:15px;
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-style:italic;
	position: absolute;
	right: 5px;
	bottom: 5px;
	z-index: 2000;
}
-->
</style>
<style type="text/css">

/*#validEmail, #validInput1*/
.validInputclass{
	margin-top: 4px;
	margin-left: 9px;
	position: absolute;
	width: 300px;
	height: 16px;
	background-repeat:no-repeat;
	}
</style>

<script type="text/javascript" src="/static/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.countdown.js"></script>
<!--<script type="text/javascript" src="../js/jquery.countdown-nl.js"></script>-->

<script type="text/javascript">
//$.countdown.setDefaults($.countdown.regional['']);
var austDay = new Date();
austDay = new Date(1999, 10, 23, 14, 15);

$(function () {
	//var austDay = new Date();
	//austDay = new Date(1999, 10, 23);
	$('#allid').countdown({since: austDay, format: 'YOWDHMS'});
	$('#secondsid').countdown({since: austDay, format: 'S'});
	$('#minutesid').countdown({since: austDay, format: 'M'});
	$('#hoursid').countdown({since: austDay, format: 'H'});
	$('#daysid').countdown({since: austDay, format: 'D'});
	$('#weeksid').countdown({since: austDay, format: 'W'});	
	$('#monthsid').countdown({since: austDay, format: 'O'});	
	$('#yearsid').countdown({since: austDay, format: 'Y'});	
	//$('#year').text(austDay.getFullYear());
});
</script>
<script type="text/javascript">

//ooit zou je een aantal variabelen moeten hebben die bijhouden of de velden goed zijn ingevuld: als 
//alle dan true zijn, dan kan de "create" button zichtbaar of ontblurd kunnen worden gemaakt, ander keertje

   //<![CDATA[

	function isValidEmailAddress(emailAddress) {
		var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
		return pattern.test(emailAddress);
	}
	
	function isEnoughCharacters(inputChars) {
		var pattern = new RegExp("[^a-zA-Z0-9_]");
	
		//var pattern = /[a-zA-Z0-9]/;
		return pattern.test(inputChars);
	}
	function isSomeKindOfName(inputChars) {
		var pattern = new RegExp("[^\'a-zA-Z .\-]");
		//var pattern = /[a-zA-Z0-9]/;
		return pattern.test(inputChars);
	}
	


$(document).ready(function() {
	 
$("#validate").keyup(function(){
var email = $("#validate").val();
	 
if(email != "")
{
if(isValidEmailAddress(email))
{
	 
$("#validEmail").css({ "background-image": "url('/static/images/validyes.png')" });
 
} else {
 
$("#validEmail").css({ "background-image": "url('/static/images/validno.png')" });
	 
}
 
} else {
 
$("#validEmail").css({ "background-image": "none" });
 
}
}); // einde S("#validate").keyup etc.

$("#validate2").keyup(function(){
var email = $("#validate2").val();
	 
if(email != "")
{
if(isEnoughCharacters(email))
{
	 
$("#validInput2").css({ "background-image": "url('/static/images/validno.png')" });
 
} else {
 
$("#validInput2").css({ "background-image": "url('/static/images/validyes.png')" });
	 
}
 
} else {
 
$("#validInput2").css({ "background-image": "none" });
 
}
}); // einde S("#validate").keyup etc.

$("#validate1").keyup(function(){
var email = $("#validate1").val();
	 
if(email != "")
{
if(isSomeKindOfName(email))
{
	 
$("#validInput1").css({ "background-image": "url('/static/images/validno.png')" });
 
} else {
 
$("#validInput1").css({ "background-image": "url('/static/images/validyes.png')" });
	 
}
 
} else {
 
$("#validInput1").css({ "background-image": "none" });
 
}
}); // einde S("#validate").keyup etc.


$("#password").keyup(function(){
var email = $("#password").val();
	 
if(email != "")
{
if(isEnoughCharacters(email))
{
	 
$("#validInput3").css({ "background-image": "url('/static/images/validno.png')" });
 
} else {
 
$("#validInput3").css({ "background-image": "url('/static/images/validyes.png')" });
	 
}
 
} else {
 
$("#validInput3").css({ "background-image": "none" });
 
}
}); // einde S("#validate").keyup etc.



$('#validInput1').html(' ');
$('#validInput2').html(' ');
$('#validEmail').html(' ');
$('#validInput3').html(' ');


$('#validate1').focus(function() {
  //alert('Handler for .focus() called.');
  
  $('#validInput1').html('&nbsp;&nbsp;&nbsp;&nbsp; only use a-zA-Z . \' - or space');
 
});
$('#validate1').blur(function() {
  //alert('Handler for .focus() called.');
  
  $('#validInput1').html(' ');
 
});


$('#validate2').focus(function() {
  //alert('Handler for .focus() called.');
  
  $('#validInput2').html('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; only use a-zA-Z0-9 or _ ');
 
});
$('#validate2').blur(function() {
  //alert('Handler for .focus() called.');
  
  $('#validInput2').html(' ');
 
});


$('#validate').focus(function() {
  //alert('Handler for .focus() called.');
  
  $('#validEmail').html('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; enter a valid email address ');
 
});
$('#validate').blur(function() {
  //alert('Handler for .focus() called.');
  
  $('#validEmail').html(' ');
 
});


$('#password').focus(function() {
  //alert('Handler for .focus() called.');
  
  $('#validInput3').html('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; only use a-zA-Z0-9 or _ ');
 
});
$('#password').blur(function() {
  //alert('Handler for .focus() called.');
  
  $('#validInput3').html(' ');
 
});





}); // einde S(document).ready etc.


//]]> <!--einde CDATA -->
</script>

</head>

<body>
<!-- Hier zou  door python gemaakte functionaliteit moeten komen, voor noscript en linx-browsers, onzichtbaar onder normale omstandigheden -->
<div id="holderid" >
	<div class="peukenclass" id="peuken1id"><img src="/static/images/stophoestImages/peukenkl1.png" width="1301" height="335" alt="peuken plaatje" style="opacity:0.7;filter:alpha(opacity=70)"  /></div>
<div class="peukenclass" id="peuken2id"><img src="/static/images/stophoestImages/peukenkl2.png" width="1301" height="335" alt="peuken plaatje"  /></div>
<div class="peukenclass" id="peuken3id"><img src="/static/images/stophoestImages/peukenkl3.png" width="1301" height="335" alt="peuken plaatje" style="opacity:0.4;filter:alpha(opacity=40)"  /></div>
</div>
<div class="foregroundclass" id="userid" style="opacity:0.6;filter:alpha(opacity=60)" ><h3>Wouter van den Brink hasn't smoked since september 23, 1999, 14:15 h </h3><h4>so he hasn't smoked for</h4> </div>
<div class="foregroundclass" id="utilnavbarid" style="opacity:0.6;filter:alpha(opacity=60)" >{% include "utilvabarSnippet.html"  %}</div>
<div class="foregroundclass" id="allid" style="opacity:0.6;filter:alpha(opacity=60)" >Wouter is gestopt met roken</div>
<div class="foregroundclass" id="secondsid" style="opacity:0.6;filter:alpha(opacity=60)" >Wouter is gestopt met roken</div>
<div class="foregroundclass" id="minutesid" style="opacity:0.6;filter:alpha(opacity=60)" >Wouter is gestopt met roken</div>
<div class="foregroundclass" id="hoursid" style="opacity:0.6;filter:alpha(opacity=60)" >Wouter is gestopt met roken</div>
<div class="foregroundclass" id="daysid" style="opacity:0.6;filter:alpha(opacity=60)" >Wouter is gestopt met roken</div>
<div class="foregroundclass" id="weeksid" style="opacity:0.6;filter:alpha(opacity=60)" >Wouter is gestopt met roken</div>
<div class="foregroundclass" id="monthsid" style="opacity:0.6;filter:alpha(opacity=60)" >Wouter is gestopt met roken</div>
<div class="foregroundclass" id="yearsid" style="opacity:0.6;filter:alpha(opacity=60)" >Wouter is gestopt met roken</div>
<div class="foregroundclass" id="applyaccountid" style="opacity:0.8;filter:alpha(opacity=80)" >Logout from  an account...
     <h1>--Logout from your own counting account--</h1>
      <p>
      Do you realy want to logout?
      </p>
     <form method="post" action="/logoutaccount"> 
   <input type="submit" value="Logout!!"/> 
      <input type="submit" value="Cancel" 
          onclick="window.location='/'; return false;"/></form> 
     
      
      
</div>
<div class="foregroundclass" id="acknowledgementid" style="opacity:0.6;filter:alpha(opacity=60)" >{% include "acknowleSnippet.html"  %}</div>

</body>
</html>
